<template>
<div class="ry">
    热映
</div>
<div class="nr">
    <router-link to="/"><el-button type="danger" plain>推荐</el-button></router-link>||
   <el-button type="danger"  >影院</el-button>||
    <router-link to="/cart"><el-button type="danger"  plain>我的</el-button></router-link>
</div>

<div class="slidershow middle">

    <div class="slides">
        <input type="radio" name="r" id="r1" checked>
        <input type="radio" name="r" id="r2">
        <input type="radio" name="r" id="r3">
        <input type="radio" name="r" id="r4">
        <div class="slide s1">
            <a href="/src/lbtwz/sbdm.html">
                 <img src="/public/static/1.jpg" alt="">
            </a>
           
        </div>
        <div class="slide">
            <a href="/src/lbtwz/jgl.html">
             <img src="/public/static/jgl.jpg" alt="">   
            </a>
        </div>
        <div class="slide">
            <a href="/src/lbtwz/zgys.html">
                <img src="/public/static/zgys.jpg" alt="">
            </a>
            
        </div>
        <div class="slide">
            <a href="/src/lbtwz/fs.html">
              <img src="/public/static/封神.jpg" alt="">  
            </a>
            
        </div>
    </div>
</div>

<div class="navigation">
    <label for="r1" class="bar"></label>
    <label for="r2" class="bar"></label>
    <label for="r3" class="bar"></label>
    <label for="r4" class="bar"></label>
</div>

<div style="position: relative;top: 230px;">
    
     <div style="width: 400px;height: 80px; border-bottom: 1px solid #ccc;">
      <router-link to="/yc">
       <p style="font-size: 17px;font-weight: bold;position: relative;right: 75px;color: #000;">
       哈艺时尚影城（长沙富兴店） 
       </p>
       <p style="font-size: 13px; color: #ccc;font-weight: bold;position: relative;top: -15px; right: 35px; ">
        天心区友谊中路与万芙北路交口富兴中央金街A区3楼
        </p>
    </router-link>  
     
    <button style="width: 50px;height: 30px; position: relative;top: -27px;
       background-color: #fff; right: 114px; border-radius: 4px;border: 2px solid palegreen;user-select: none;
       font-size: 14px;color:palegreen;">
          改签
    </button>   
    <button style="width: 45px;height: 30px; position: relative;top: -27px;right: 110px;
       background-color: #fff;border-radius: 4px;border: 2px solid gold;user-select: none;
       font-size: 14px;color:gold;">
          小吃
    </button>   
    <button style="width: 58px;height: 30px; position: relative;top: -27px;
       background-color: #fff; right: 105px; border-radius: 4px;border: 2px solid gold;user-select: none;
       font-size: 14px;color:gold;">
          影城卡
    </button> 
    </div>   

    <router-link to="/yc">
     <div style="width: 400px;height: 80px; border-bottom: 1px solid #ccc;">
     <p style="font-size: 17px;font-weight: bold;position: relative;right: 75px;color: #000;">
        中影木禾影城（南郊公园店）
    </p>
    <p style="font-size: 13px; color: #ccc;font-weight: bold;position: relative;top: -15px; right: 38px; ">
        天心区新开铺路174号影院直梯2F（永辉超市楼上）
    </p>
    <button style="width: 28px;height: 30px; position: relative;top: -27px;
       background-color: #fff; right: 130px; border-radius: 4px;border: 2px solid palegreen;user-select: none;
       font-size: 14px;color:palegreen;">
          退  
    </button>   
    <button style="width: 45px;height: 30px; position: relative;top: -27px;right: 125px;
       background-color: #fff;border-radius: 4px;border: 2px solid gold;user-select: none;
       font-size: 14px;color:gold;">
          小吃
    </button>   
    <button style="width: 45px;height: 30px; position: relative;top: -27px;
       background-color: #fff; right: 120px; border-radius: 4px;border: 2px solid gold;user-select: none;
       font-size: 14px;color:gold;">
          卷包
    </button> 
    </div>   
    </router-link>  

    <router-link to="/yc">
     <div style="width: 400px;height: 80px; border-bottom: 1px solid #ccc;">
     <p style="font-size: 17px;font-weight: bold;position: relative;right: 60px;color: #000;">
        幕语优+影城（南郊公园旗舰店）
    </p>
    <p style="font-size: 13px; color: #ccc;font-weight: bold;position: relative;top: -15px; right: 74px; ">
        天心区书院南路45号南郊生活广场一楼
    </p>
    <button style="width: 28px;height: 30px; position: relative;top: -27px;
       background-color: #fff; right: 120px; border-radius: 4px;border: 2px solid palegreen;user-select: none;
       font-size: 14px;color:palegreen;">
          退  
    </button>   
    <button style="width: 45px;height: 30px; position: relative;top: -27px;right: 115px;
       background-color: #fff;border-radius: 4px;border: 2px solid gold;user-select: none;
       font-size: 14px;color:gold;">
          小吃
    </button>   
    <button style="width: 58px;height: 30px; position: relative;top: -27px;
       background-color: #fff; right: 110px; border-radius: 4px;border: 2px solid gold;user-select: none;
       font-size: 14px;color:gold;">
          影城卡
    </button> 
    </div>   
    </router-link> 

    <router-link to="/yc">
     <div style="width: 400px;height: 80px; border-bottom: 1px solid #ccc;">
     <p style="font-size: 17px;font-weight: bold;position: relative;right: 60px;color: #000;">
        中影国际影城（雨花凯德广场店）
    </p>
    <p style="font-size: 13px; color: #ccc;font-weight: bold;position: relative;top: -15px; right: 88px; ">
        雨花区韶山中路421号凯德广场2楼
    </p>
    <button style="width: 28px;height: 30px; position: relative;top: -27px;
       background-color: #fff; right: 120px; border-radius: 4px;border: 2px solid palegreen;user-select: none;
       font-size: 14px;color:palegreen;">
          退  
    </button>   
    <button style="width: 45px;height: 30px; position: relative;top: -27px;right: 115px;
       background-color: #fff;border-radius: 4px;border: 2px solid gold;user-select: none;
       font-size: 14px;color:gold;">
          小吃
    </button>   
    <button style="width: 58px;height: 30px; position: relative;top: -27px;
       background-color: #fff; right: 110px; border-radius: 4px;border: 2px solid gold;user-select: none;
       font-size: 14px;color:gold;">
          影城卡
    </button> 
    </div>   
</router-link>

<router-link to="/yc">
     <div style="width: 400px;height: 80px; border-bottom: 1px solid #ccc;">
     <p style="font-size: 17px;font-weight: bold;position: relative;right: 145px;color: #000;">
        万博汇影城
    </p>
    <p style="font-size: 13px; color: #ccc;font-weight: bold;position: relative;top: -15px; right: 45px; ">
        雨花区韶山中路489号万博汇云谷摩卡大街B栋4楼
    </p>
    <button style="width: 28px;height: 30px; position: relative;top: -27px;
       background-color: #fff; right: 120px; border-radius: 4px;border: 2px solid palegreen;user-select: none;
       font-size: 14px;color:palegreen;">
          退  
    </button>   
    <button style="width: 45px;height: 30px; position: relative;top: -27px;right: 115px;
       background-color: #fff;border-radius: 4px;border: 2px solid gold;user-select: none;
       font-size: 14px;color:gold;">
          小吃
    </button>   
    <button style="width: 58px;height: 30px; position: relative;top: -27px;
       background-color: #fff; right: 110px; border-radius: 4px;border: 2px solid gold;user-select: none;
       font-size: 14px;color:gold;">
          影城卡
    </button> 
    </div>   
</router-link>
    

</div>



</template>

<script setup>
 
</script>

<style scoped>
button{
    border: none;
    outline: none;
}
a{
    text-decoration: none;
}
.slidershow{
    width: 380px;
    height: 200px;
    padding-left: 10px;
    overflow: hidden;
    position: absolute;
}
.middle{
    position: absolute;
    top: 18%;
}
.navigation{
    position: absolute;
    bottom: 20px;
    display: flex;
}
.bar{
    width: 30px;
    height: 5px;
    border: 2px solid rgb(110, 109, 109);
    margin: 6px;
    cursor: pointer;
    transition: 1.4s;
    position: relative;
    top: -440px;
    left: 115px;
}
.bar:hover{
    background: rgb(246, 175, 87);
}
input[name="r"]{
    position: absolute;
    visibility: hidden;
}
.slides{
    width: 500%;
    height: 100%;
    display: flex;
}
.slide{
    width: 20%;
    transform: 1.6s;
}
.slide img{
    width: 100%;
    height: 100%;
}
#r1:checked ~ .s1{
    margin-left: 0;
}
#r2:checked ~ .s1{
    margin-left: -20%;
}
#r3:checked ~ .s1{
    margin-left: -40%;
}
#r4:checked ~ .s1{
    margin-left: -60%;
}
.ry{
    font-size: 20px;
    padding-top: 50px;
    height: 50px;
    background:linear-gradient(to bottom,rgb(249, 88, 47),rgb(237, 161, 145)) ;
}
.nr{
    padding-top: 5px;
}

</style>